<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML（双向绑定）
const valueHtml = defineModel();

watch(valueHtml, (newHtml) => { 
    // console.info(newHtml);
})

// mode
const mode = ref("default");

// 模拟 ajax 异步获取内容
onMounted(() => {
//   setTimeout(() => {
//     valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
//   }, 1500);
});

const toolbarConfig = {};
const editorConfig = { 
    placeholder: "请输入内容...", 
    MENU_CONF:{
    uploadImage:{
      server: '/api/common/upload',
      fieldName: 'file',
      headers: {
        token: localStorage.getItem('Token'),
      },
      // 自定义插入图片
      customInsert(res, insertFn) {
        // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        // console.log("res",res)

        // 从 res 中找到 url alt href ，然后插入图片
        const addr = '/api/common/download/' + res.data
        insertFn(addr, '文件名', addr)
      },
    },

  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

</script>

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<style scoped></style>
